<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
		<br />
		<div class="box3"></div>
	</body>
</html>
<style type="text/css">
	/* 百分比可以使子元素随父元素大小改变 */
	/* em根据字体大小计算 1em= 1font-size */
	/* rem相对于根元素的字体大小计算 */
	.box1{
		width: 300px;
		height: 100px;
		background-color: #FF0000;
	}
	.box2{
		height: 50%;
		width: 50%;
		background-color: #0000FF;
	}
	.box3{
		height: 12.5rem;
		width: 12.5rem;
		background-color: #0000FF;
	}
	.
</style>